<template>
	<div class="main">
<van-nav-bar
  title="问卷选项"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
<div class="paper"  v-for="(item,index) in paperItem" :key="index">
				<!-- <div >{{index}}</div> -->
				<div class="title" >{{index+1}}.{{item.paperItemTitle}}({{item.itemPointValue}})</div>
				<div class="select" >
				<van-radio-group v-model="checked[index]" @change="getValue(item,index)" class="item">
				  <van-radio name="A" icon-size="18px">A.{{item.optionA}}</van-radio>
				  <van-radio name="B" icon-size="18px">B.{{item.optionB}}</van-radio>
				  <van-radio name="C" icon-size="18px">C.{{item.optionC}}</van-radio>
				  <van-radio name="D" icon-size="18px">D.{{item.optionD}}</van-radio>
				  <van-radio name="E" icon-size="18px">E.{{item.optionE}}</van-radio>
				</van-radio-group></div>
				<!-- <van-divider
			  :style="{ color: '#1989fa', borderColor: '#1989fa'}"
			>
			</van-divider> -->
			</div>
			<div class="button">
				<div class="chongzhi"><van-button plain hairline type="warning" @click="rest()">重置</van-button></div>
				<div class="tijiao"><van-button plain hairline type="primary" @click="tijiao">提交</van-button></div>
			</div>
	</div>
</template>

<script>
	import {getPaperItem,ItemList,getEvaluationId,submit} from '@/api/pj'
import { Dialog, Toast } from 'vant'
	export default {
		data() {
			return{
				id:this.$route.query.index,
				paperItem:[],
				param:{
					pageNum:1,
					pageSize:10,
					PaperItemCategoryId:null,
					evaluationPaperId:null
				},
				checked:[],
				// param1:{
				// 	paperItemId:null,
				// 	score:null,
				// 	option:null,
				// 	paperItemCategoryId:null
				// },
				data:[],
				evaluationPaperId:null,
				evaluationId:null
			}
		},
		created() {
			this.getPaperItem()
		},
		methods:{
			async getPaperItem(){
				this.param.PaperItemCategoryId=this.id
				
				const result=await ItemList(this.param);
				if(result.code==200){
					
					this.paperItem=result.rows
					this.evaluationPaperId=result.rows[0].evaluationPaperId
					console.log(this.evaluationPaperId)
				}
			},
			onClickLeft(){
				this.$router.push({path:'/Info/detail',query:{index:this.evaluationPaperId}})
			},
			rest(){
				this.checked=[]
			},
			 tijiao(){
				this.getEvaluationIds(this.evaluationPaperId)
					Dialog.confirm({
						title:"提交",
						message:"确定要提交问卷吗？"
					}).then(async ()=>{
					
				const param={
					evaluationId:this.evaluationId,
					paperItemList:this.data
				}
				const result=await submit(param);
				if(result.code==200){
					Toast.success('提交成功');
					this.checked=[]
					}else{
					Toast.fail('提交失败');
					}
					}).catch(()=>{
						Toast('已取消提交')
					})
				
			},
			getValue(item,index){
				const param={
					option:null,
					itemPointValue:null,
					paperItemId:null,
					paperItemCategoryId:null
				}
				// if(index+1==item.paperItemId){
					param.option=this.checked[index]
				    param.itemPointValue=item.itemPointValue
					param.paperItemId=item.paperItemId
					param.paperItemCategoryId=item.paperItemCategoryId
					this.data[index]=param
				// }
				  
				// this.checked.push(name)
				// console.log(this.data)
			},
			async getEvaluationIds(id){
				const result=await getEvaluationId(id);
				if(result.code==200){
					this.evaluationId=result.data
				}
			}
		}
	}
</script>

<style scoped>
	.paper{
		padding-left: 3px;
		padding-top: 10px;
	}
	.paper .title{
		font-size: 20px;
	}
	.paper .select{
		font-size: 18px;
	}
	.van-radio-label-margin{
		margin-top: 3px;
	}
	.button{
		display: flex;
		padding: 10px 0 0 0;
	}
	.button .chongzhi{
		padding: 0 0 0 70px;
	}
	.button .tijiao{
		padding:  0 0 0 120px;
	}
</style>